<template>
  <div class="meet">
    <div class="mHeader">
      <img src="../../../assets/images/imLynk/meetLynk/gif.jpg" alt="">
    </div>
    <ul class="nav">
      <li @click="change(0)">品牌渊源</li>
      <li @click="change(1)">商业模式</li>
      <li @click="change(2)">品牌历程</li>
    </ul>
    <section>
      <brandOrigin v-show="msg==0"></brandOrigin>
      <busModel v-show="msg==1"></busModel>
      <brandCourse v-show="msg==2"></brandCourse>
    </section>
    <shareFoot></shareFoot>
  </div>

</template>

<script>
  import shareFoot from "../../share/shareFoot";
  import brandCourse from "./brandCourse";
  import brandOrigin from "./brandOrigin";
  import busModel from "./busModel";
    export default {
        name: "meetLynk",
        components:{
          shareFoot,
          brandCourse,
          brandOrigin,
          busModel
        },
      data(){
          return{
            msg:'0'
          }
      },
      methods:{
          change(index){
            this.msg=index
          }
      }
    }
</script>

<style scoped>
.meet,.mHeader{
  width: 100%;
}
.meet .mHeader img{
  width: 100%;
  margin-top: 50px;
}
  .nav{
    width: 100%;
    overflow: hidden;
    background: black;
    margin-top: -4px;
  }
  .nav li{
    width: 32%;
    margin:0;
    height: 40px;
    line-height: 40px;
    background: darkslategrey;
    color: white;
  }

</style>
